<template>
  <!--  <div class="q-pa-md q-gutter-sm">-->
  <input-dialog
    :fields="isModify ? modifyFields : fields"
    :dialog-show-value="isShow"
    @close="closeDialog"
    :title="title"
    @deleteField="deleteFieldClick"
  >
    <template v-slot:buttons>
      <q-card-actions>
        <q-btn label="新增字段" color="primary" @click="newFieldClick" />
        <q-btn
          v-if="isModify"
          @click="resetClick"
          label="还原动作"
          color="primary"
        />
        <q-btn
          :label="isModify ? '确定修改' : '确定添加'"
          color="primary"
          v-close-popup
          @click="confirmAddActionClick"
        />
      </q-card-actions>
    </template>
  </input-dialog>

  <input-dialog
    :fields="newFields"
    :dialog-show-value="isShowNewField"
    @close="closeNewFieldDialog"
    title="增加字段"
    @onConfirm="newFieldConfirmClick"
  ></input-dialog>
  <!--  </div>-->
</template>

<script setup>
import InputDialog from "components/dialog/InputDialog.vue";
import { useQuasar } from "quasar";
import { useDataStore } from "stores/data";
import { computed, ref, toRaw } from "vue";

const emit = defineEmits([
  "close",
  "onConfirm",
  "modifyNewField",
  "deleteField",
  "reset",
]);
const props = defineProps({
  showValue: {
    type: Boolean,
    default: false,
  },
  isModify: {
    type: Boolean,
    default: false,
  },
  modifyFields: {
    type: Array,
    default: () => [],
  },
});
const $q = useQuasar();
const title = computed(() => (props.isModify ? "修改动作" : "添加动作"));
const isShow = computed(() => props.showValue);
const isShowNewField = ref(false);

const fields = ref([
  {
    key: "actionPath",
    name: "动作路径",
    value: "",
  },
  {
    key: "actionName",
    name: "动作名称",
    value: "",
  },
]);
const originFields = JSON.parse(JSON.stringify(fields.value));

const newFields = ref([
  {
    key: "key",
    name: "关键字key",
    value: "",
  },
  {
    key: "name",
    name: "关键字名称",
    value: "",
    isHidden: true,
  },
  {
    key: "value",
    name: "关键字描述",
    value: "",
  },
]);

/**
 * 新增字段按钮点击
 */
function newFieldClick() {
  for (let i = 0; i < newFields.value.length; i++) {
    newFields.value[i].value = "";
  }
  isShowNewField.value = true;
}

/**
 * 删除字段
 */
function deleteFieldClick(index) {
  if (props.isModify) {
    emit("deleteField", index);
  } else {
    fields.value.splice(index, 1);
  }
}

/**
 * 关闭动作弹框
 */
function closeDialog() {
  // 关闭弹框后清除输入框内容，不然下次打开会重新带出来
  emit("close");
  fields.value = JSON.parse(JSON.stringify(originFields));
}

/**
 * 还原动作按钮点击
 */
function resetClick() {
  emit("reset");
}

/**
 * 关闭新增字段弹框
 */
function closeNewFieldDialog() {
  // 关闭弹框后清除输入框内容，不然下次打开会重新带出来
  // for (let i = 0; i < newFields.value.length; i++) {
  //   newFields.value[i].value = ''
  // }
  isShowNewField.value = false;
}

/**
 * 确认添加动作
 */
function confirmAddActionClick() {
  let judgeFields = null;
  if (props.isModify) {
    judgeFields = props.modifyFields;
  } else {
    judgeFields = fields.value;
  }
  for (let i = 0; i < judgeFields.length; i++) {
    if (!judgeFields[i].value) {
      $q.notify({
        message: `${judgeFields[i].name}不能为空`,
        type: "negative",
        position: "top",
      });
      return;
    }
  }
  // 添加路径不能重复、
  if (judgeFields.length > 0 && !props.isModify) {
    const actionPath = judgeFields[0].value;
    console.log(
      "====",
      useDataStore().actionList.map((value) => value[0].value)
    );
    if (
      useDataStore()
        .actionList.map((value) => value[0].value)
        .indexOf(actionPath) !== -1
    ) {
      $q.notify({
        message: `${actionPath}重复，请修改路径`,
        type: "negative",
        position: "top",
      });
      return;
    }
  }
  emit(
    "onConfirm",
    JSON.parse(JSON.stringify(toRaw(fields.value))),
    props.isModify
  );
  fields.value = JSON.parse(JSON.stringify(originFields));
}

/**
 * 确认增加字段
 */
function newFieldConfirmClick() {
  // debugger
  console.log("dataList", newFields);
  const obj = {};

  obj.key = newFields.value[0].value;
  obj.name = newFields.value[0].value;
  obj.value = newFields.value[2].value;
  obj.isDelete = true;
  if (props.isModify) {
    emit("modifyNewField", obj);
  } else {
    fields.value.push(obj);
  }
  isShowNewField.value = false;
  // // 关闭弹框后清除输入框内容，不然下次打开会重新带出来
  // for (let i = 0; i < newFields.value.length; i++) {
  //   newFields.value[i].value = ''
  // }
}
</script>

<style scoped></style>
